<!-- watch侦听器（监视器）
作用：监视数据变化，执行一些业务逻辑或异步操作。
语法:
2.完整写法 -> 添加额外配置项 
(1)deep:true对复杂类型深度监视
(2)immediate:true初始化立刻执行一次handler方法
需求：输入内容，修改语言，都实时翻译
-->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-size: 18px;
    }

    #app {
        padding: 10px 20px;
    }

    .query {
        margin: 10px 0;
    }

    .box {
        display: flex;
    }

    textarea {
        width: 300px;
        height: 160px;
        font-size: 18px;
        border: 1px solid #dedede;
        outline: none;
        resize: none;
        padding: 10px;
    }

    textarea:hover {
        border: 1px solid #1589f5;
    }

    .transbox {
        width: 300px;
        height: 160px;
        background-color: #f0f0f0;
        padding: 10px;
        border: none;
    }

    .tip-box {
        width: 300px;
        height: 25px;
        line-height: 25px;
        display: flex;
    }

    .tip-box span {
        flex: 1;
        text-align: center;
    }

    .query span {
        font-size: 18px;
    }

    .input-wrap {
        position: relative;
    }

    .input-wrap span {
        position: absolute;
        right: 15px;
        bottom: 15px;
        font-size: 12px;
    }

    .input-wrap i {
        font-size: 20px;
        font-style: normal;
    }
</style>
<div id="app">
    <!-- 条件选择框 -->
    <div class="query">
        <span>翻译成的语言：</span>
        <select v-model="obj.lang">
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
        </select>
    </div>

    <!-- 翻译框 -->
    <div class="box">
        <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
            <div class="transbox">{{content}}</div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="../lib/axios.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            words: '',
            obj: {
                words: '小黑',
                lang: 'italy'
            },
            content: ''

        },
        watch: {
            //多监视 --所有属性进行监视
            obj: {
                //多属性监视配置
                deep: true,
                //页面一进就进行提交一次数据
                immediate: true,
                handler(newValue) {
                    console.log('对象被修改了', newValue);
                    //防抖：延迟执行→干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
                    //this.timer因为不渲染在页面，即没有在data中声明,相当于生成了一个实例，挂在了app上
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await axios({
                            method: 'get',
                            url: "https://applet-base-api-t.itheima.net/api/translate",
                            params: newValue
                        })
                        this.content = res.data.data
                    }, 300);
                }
            }
        }
    })
</script>